// font
$font = -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
//'Inter'
$font-aeonik = 'Aeonik Pro', 'Inter'

// Font Size 
$font-size-xl  = 36px
$font-size-l   = 24px
$font-size     = 20px
$font-size-m   = 18px
$font-size-s   = 16px
$font-size-xs  = 14px
$font-size-xxs = 10px

// Line Height 
$line-height-xl  = 52px
$line-height-l   = 40px
$line-height     = 32px
$line-height-m   = 30px
$line-height-s   = 26px
$line-height-xs  = 22px
$line-height-xxs = 16px

// Transision time
$t = .2s
$ts = .05s

// Border-radius
$radius-xxl = 24px
$radius-xl = 16px
$radius-l = 12px
$radius = 8px
$radius-s = 4px

// colors
:root {
    --color-white:      #ffffff
    --color-gray-100:   #f7f7f9
    --color-gray-200:   #efeff3
    --color-gray-300:   #e0e0e3
    --color-gray-400:   #d1d1d2
    --color-gray-500:   #ADAEAF //#898A8B //acacb0
    --color-gray-550:   #676778 //#898A8B
    --color-gray-600:   #343436
    --color-gray-700:   #222326
    --color-gray-800:   #191A1D
    --color-gray-900:   #121316
    --color-black:      #000000
    --color-blue:       #1A42E8
    --color-accentblue: #2856EA
    --color-success:    #41A167 //#37975d // #4FA471 //#37BC6C
    --color-lightblue:  #719FF8 // #5A88FF
    --color-lighterblue:lighten(#5A88FF, 25%)
    --color-yellow:     #f8c555
    --color-yellow-20:  alpha(#f8c555, 0.2)
    --color-orange:     #FF5A12
    --color-error:      #E81A42
}
   

$accentColor        = var(--color-blue)
$successColor       = var(--color-success)
$errorColor         = var(--color-error)
$textColor          = var(--color-black)
$text2Color         = var(--color-gray-550)
$borderColor        = var(--color-gray-200)
$bgColor            = var(--color-white)
$sideColor          = var(--color-gray-100)
$bgCode             = $borderColor
$editorColor        = var(--color-gray-100)
$editorHeadColor    = var(--color-gray-100)
$onsurfaceColor     = var(--color-gray-100)
$linkColor          = var(--color-accentblue)
$lightBorderColor   = var(--color-gray-300)
$depricatedColor    = var(--color-yellow) 
$depricatedBgColor  = var(--color-yellow-20)

$editorText                 = #24292e
$editorCommentColor         = #707070
$editorTagColor             = #905
$editorFunctionNameColor    = #e90
$editorFunctionColor        = $accentColor
$editorSymbolColor          = #24292e
$editorSelectorColor        = #666
$editorStringColor          = #44772C //#819e07
$editorOperatorColor        = #9a6e3a
$editorInsertedColor        = rgb(155, 153, 106)
$editorPunctuationColor     = #666


$dropColorDark      = rgba(25,26,29,.9);
$dropColorSearchDark= rgba(25,26,29,.6);
$dropColor          = rgba(245,245,247,.9)
$dropColorSearchLiht= rgba(239,239,243,.6)

$letterSpacingText  = -0.072px

$gradient = linear-gradient(86deg, #1A42E8 3.5%, #27C2FF 197.36%);
$gradient0 = linear-gradient(86deg, rgba(26,66,232,0) 3.5%, rgba(39,194,255,0) 197.36%);
$gradient2 = linear-gradient(180deg, rgb(17 17 21) 0%, rgba(25, 26, 29, 1) 100%);

$small = 576px
$medium = 768px
$large = 992px
$xLarge = 1200px
$extraLarge = 1480px
$xxxLarge = 1720px


html.theme-dark {
    color-scheme dark
}